/**
 * @file 图表组件样式
 * @description 基于ECharts和Chart.js的图表组件样式
 */

.axiom-chart-container {
  position: relative;
  background: var(--axiom-bg-color);
  border-radius: var(--axiom-border-radius-large);
  border: 1px solid var(--axiom-border-color);
  overflow: hidden;
  box-shadow: var(--axiom-box-shadow-base);
  
  // 图表画布
  canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  // ECharts 容器
  .echarts-container {
    width: 100%;
    height: 100%;
    min-height: var(--axiom-chart-min-height, 300px);
  }
  
  // 加载状态
  &.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--axiom-chart-loading-error-min-height, 300px);
  }
  
  // 错误状态
  &.error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--axiom-chart-loading-error-min-height, 300px);
    color: var(--axiom-danger-color);
  }
  
  // 响应式调整
  @media (max-width: 768px) {
    min-height: var(--axiom-chart-mobile-min-height, 250px);
    
    canvas {
      max-height: var(--axiom-chart-mobile-canvas-max-height, 250px);
    }
    
    .echarts-container {
      min-height: var(--axiom-chart-mobile-min-height, 250px);
    }
  }
} 